<template>
  <div id="app">
    <div class="app-header">
      <h1>Vue 2 企业级穿梭框组件</h1>
      <p>功能完整、性能优化的数据选择组件</p>
    </div>
    
    <div class="demo-section">
      <h2>基础用法</h2>
      <p>支持双向绑定，可以通过 v-model 控制选中的数据</p>
      <Transfer
        :data="basicData"
        v-model="basicValue"
        @change="handleBasicChange"
      />
      <div class="result">
        <p>已选择的值: {{ basicValue }}</p>
      </div>
    </div>

    <div class="demo-section">
      <h2>可搜索穿梭框</h2>
      <p>开启搜索功能，支持实时过滤列表数据</p>
      <Transfer
        :data="searchData"
        v-model="searchValue"
        :filterable="true"
        left-title="水果列表"
        right-title="已选水果"
        filter-placeholder="搜索水果..."
        @change="handleSearchChange"
      />
      <div class="result">
        <p>已选择: {{ searchValue.map(key => searchData.find(item => item.key === key)?.label).join(', ') }}</p>
      </div>
    </div>

    <div class="demo-section">
      <h2>自定义渲染</h2>
      <p>使用 render-content 属性自定义列表项的显示内容</p>
      <Transfer
        :data="customData"
        v-model="customValue"
        :render-content="renderCustomContent"
        :filterable="true"
        left-title="员工列表"
        right-title="已选员工"
        filter-placeholder="搜索员工..."
        @change="handleCustomChange"
      />
      <div class="result">
        <p>已选择 {{ customValue.length }} 名员工</p>
      </div>
    </div>

    <div class="demo-section">
      <h2>禁用状态</h2>
      <p>支持禁用特定选项，禁用的选项不能被选择</p>
      <Transfer
        :data="disabledData"
        v-model="disabledValue"
        :filterable="true"
        left-title="功能列表"
        right-title="已启用功能"
        @change="handleDisabledChange"
      />
    </div>

    <div class="demo-section">
      <h2>大数据量测试</h2>
      <p>组件经过优化，支持大量数据的流畅操作</p>
      <div class="controls">
        <button @click="generateBigData(1000)" class="btn">生成1000条</button>
        <button @click="generateBigData(5000)" class="btn">生成5000条</button>
        <button @click="generateBigData(10000)" class="btn">生成10000条</button>
        <button @click="clearBigData" class="btn btn-danger">清空数据</button>
      </div>
      <Transfer
        :data="bigData"
        v-model="bigValue"
        :filterable="true"
        list-height="300px"
        left-title="大数据源"
        right-title="已选数据"
        filter-placeholder="搜索数据..."
        @change="handleBigChange"
      />
      <div class="result">
        <p>数据总量: {{ bigData.length }} 项，已选择 {{ bigValue.length }} 项</p>
      </div>
    </div>

    <div class="demo-section">
      <h2>事件监听</h2>
      <p>监听穿梭框的变化事件，获取详细的操作信息</p>
      <Transfer
        :data="eventData"
        v-model="eventValue"
        :filterable="true"
        left-title="事件测试"
        right-title="已选项"
        @change="handleEventChange"
      />
      <div class="event-log">
        <h3>事件日志</h3>
        <div class="log-container">
          <div
            v-for="(log, index) in eventLogs"
            :key="index"
            class="log-item"
          >
            <span class="log-time">{{ log.time }}</span>
            <span class="log-direction" :class="log.direction">{{ log.direction === 'right' ? '→' : '←' }}</span>
            <span class="log-message">{{ log.message }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Transfer from './components/Transfer.vue'

export default {
  name: 'App',
  components: {
    Transfer
  },
  data() {
    return {
      basicData: [
        { key: 1, label: '选项1' },
        { key: 2, label: '选项2' },
        { key: 3, label: '选项3', disabled: true },
        { key: 4, label: '选项4' },
        { key: 5, label: '选项5' }
      ],
      basicValue: [1, 3],
      
      searchData: [
        { key: 'apple', label: '苹果' },
        { key: 'banana', label: '香蕉' },
        { key: 'orange', label: '橙子' },
        { key: 'grape', label: '葡萄' },
        { key: 'watermelon', label: '西瓜' },
        { key: 'strawberry', label: '草莓' },
        { key: 'peach', label: '桃子' },
        { key: 'pear', label: '梨子' },
        { key: 'pineapple', label: '菠萝' },
        { key: 'cherry', label: '樱桃' }
      ],
      searchValue: ['apple', 'banana'],
      
      customData: [
        { key: 1, name: '张三', age: 25, department: '技术部', position: '前端工程师' },
        { key: 2, name: '李四', age: 30, department: '产品部', position: '产品经理' },
        { key: 3, name: '王五', age: 28, department: '设计部', position: 'UI设计师' },
        { key: 4, name: '赵六', age: 32, department: '运营部', position: '运营专员' },
        { key: 5, name: '孙七', age: 26, department: '技术部', position: '后端工程师' },
        { key: 6, name: '周八', age: 29, department: '技术部', position: '测试工程师' },
        { key: 7, name: '吴九', age: 31, department: '产品部', position: '产品总监' },
        { key: 8, name: '郑十', age: 27, department: '设计部', position: '交互设计师' }
      ],
      customValue: [1, 2],
      
      disabledData: [
        { key: 'read', label: '读取权限' },
        { key: 'write', label: '写入权限' },
        { key: 'delete', label: '删除权限', disabled: true },
        { key: 'admin', label: '管理员权限', disabled: true },
        { key: 'user', label: '普通用户权限' },
        { key: 'guest', label: '访客权限' }
      ],
      disabledValue: ['read', 'user'],
      
      bigData: [],
      bigValue: [],
      
      eventData: [
        { key: 1, label: '事件项1' },
        { key: 2, label: '事件项2' },
        { key: 3, label: '事件项3' },
        { key: 4, label: '事件项4' },
        { key: 5, label: '事件项5' }
      ],
      eventValue: [],
      eventLogs: []
    }
  },
  methods: {
    handleBasicChange(value, direction, movedKeys) {
      console.log('基础用法变化:', { value, direction, movedKeys })
    },
    
    handleSearchChange(value, direction, movedKeys) {
      console.log('搜索变化:', { value, direction, movedKeys })
    },
    
    handleCustomChange(value, direction, movedKeys) {
      console.log('自定义变化:', { value, direction, movedKeys })
    },
    
    handleDisabledChange(value, direction, movedKeys) {
      console.log('禁用状态变化:', { value, direction, movedKeys })
    },
    
    handleBigChange(value, direction, movedKeys) {
      console.log('大数据变化:', { value, direction, movedKeys })
    },
    
    handleEventChange(value, direction, movedKeys) {
      const time = new Date().toLocaleTimeString()
      const actionText = direction === 'right' ? '移动到右侧' : '移动到左侧'
      const message = `${actionText} ${movedKeys.length} 项: ${movedKeys.join(', ')}`
      
      this.eventLogs.unshift({
        time,
        direction,
        message
      })
      
      // 只保留最近20条日志
      if (this.eventLogs.length > 20) {
        this.eventLogs = this.eventLogs.slice(0, 20)
      }
    },
    
    renderCustomContent(item) {
      return `${item.name} (${item.age}岁, ${item.department} - ${item.position})`
    },
    
    generateBigData(count) {
      const startTime = performance.now()
      this.bigData = []
      this.bigValue = []
      
      for (let i = 1; i <= count; i++) {
        this.bigData.push({
          key: i,
          label: `数据项 ${i.toString().padStart(5, '0')}`,
          disabled: i % 100 === 0 // 每100个禁用一个
        })
      }
      
      const endTime = performance.now()
      console.log(`生成${count}条数据用时: ${(endTime - startTime).toFixed(2)}ms`)
      
      // 预选一些数据
      const preSelected = []
      for (let i = 1; i <= Math.min(10, count); i += 2) {
        preSelected.push(i)
      }
      this.bigValue = preSelected
    },
    
    clearBigData() {
      this.bigData = []
      this.bigValue = []
    }
  }
}
</script>

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f5f7fa;
}

#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  min-height: 100vh;
}

.app-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
}

.app-header h1 {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 600;
}

.app-header p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.demo-section {
  margin-bottom: 40px;
  padding: 24px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fff;
}

.demo-section h2 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
}

.demo-section p {
  margin-bottom: 20px;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.result {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.result p {
  margin: 0;
  font-size: 14px;
  color: #606266;
}

.controls {
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
  color: #606266;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.btn:hover {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}

.btn-danger {
  background: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}

.btn-danger:hover {
  background: #f78989;
  border-color: #f78989;
}

.event-log {
  margin-top: 20px;
}

.event-log h3 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 16px;
}

.log-container {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background: #fafafa;
}

.log-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}

.log-item:last-child {
  border-bottom: none;
}

.log-time {
  color: #909399;
  margin-right: 8px;
  font-family: monospace;
}

.log-direction {
  width: 20px;
  text-align: center;
  margin-right: 8px;
  font-weight: bold;
}

.log-direction.right {
  color: #67c23a;
}

.log-direction.left {
  color: #e6a23c;
}

.log-message {
  color: #606266;
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  #app {
    padding: 10px;
  }
  
  .app-header h1 {
    font-size: 24px;
  }
  
  .demo-section {
    padding: 16px;
  }
  
  .controls {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
}
</style>